<template>
  <!--分时-->
  <div class="k_content" id="kline_fenshi" style="width: 100%;height: 100%;">
    <div id="main_fenshi" style="width:100%;height:100%;"><div class="loding">数据正在加载 请稍后...</div></div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import echarts from 'echarts';
import kline from '../kline/kline.js';
import data from '../kline/tmpdata.js';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */,
    navtopheight: state => state.navtopheight /* 分隔面板高度 */
  }),
  data() {
    return {
      time: 1,
      klineInterval: null,
      isright: false,
      mychart: null
    };
  },
  beforeDestroy() {
    if (this.klineInterval) {
      clearInterval(this.klineInterval);
    }
    this.klineInterval = null;
  },
  watch: {
    select(val) {
      let mychart = null;
      mychart = document.getElementById('main_fenshi');
      mychart.style.width = $('#kline_fenshi').width() + 'px';
      mychart.style.height = $('#kline_fenshi').height() + 'px';
      this.mychart = echarts.init(mychart);
      this.init();
    },
    /* 分隔面板高度*/
    navtopheight(val) {
      let mychart = null;
      mychart = document.getElementById('main_fenshi');
      mychart.style.width = $('#kline_fenshi').width() + 'px';
      mychart.style.height = $('#kline_fenshi').height() + 'px';
      this.mychart = echarts.init(mychart);
      this.mychart.resize();
    }
  },
  mounted() {
    let mychart = null;
    mychart = document.getElementById('main_fenshi');
    mychart.style.width = $('#kline_fenshi').width() + 'px';
    mychart.style.height = $('#kline_fenshi').height() + 'px';
    this.mychart = echarts.init(mychart);
    this.init();
  },
  components: {},
  methods: {
    init() {
      var that = this;
      clearInterval(that.klineInterval);
      that.klineInterval = null;
      this.rkline(this.select.code);
      that.klineInterval = setInterval(res => {
        that.rkline(this.select.code, 1);
      }, 1000);
    },
    // 渲染日K
    rkline(symbol) {
      symbol = symbol ? symbol : (symbol = this.select.code);
      if (!symbol) {
        symbol = this.select.code;
      }
      this.$get('addons/tf-futures/get-kline/get-line?symbol=' + symbol).then(res => {
        if (res.data[0].length > 0) {
          this.mychart.setOption(kline.initMOption(res.data, 'auto'));
        }else{
          if (this.klineInterval) {
            clearInterval(this.klineInterval);
          }
          this.klineInterval = null;
          this.mychart.setOption(kline.initMOption(data.lindata0, 'auto'));
        }
      });
    }
  }
};
</script>

<style scoped></style>
